

<template>
  <div class="category-page">
    <!-- 顶部搜索框 -->
    <div class="search-bar">
      <input
          type="text"
          v-model="searchKeyword"
          placeholder="搜索商品"
          @keyup.enter="searchProducts"
      >
      <button @click="searchProducts">搜索</button>
    </div>

    <div class="main-content">
      <!-- 左侧分类导航 -->
      <div class="category-nav">
        <ul>
          <li v-for="(category, index) in categories"
              :key="index"
              :class="{active: currentCategory === index}"
              @click="selectCategory(index)">
            {{ category.name }}
          </li>
        </ul>
      </div>

      <!-- 右侧商品列表 -->
      <div class="product-list">
        <div class="product-grid">
          <div v-for="(product, index) in currentProducts"
               :key="index"
               class="product-item"
               @click="goToDetail(product.id)">
            <div class="product-img">
              <img :src="product.image" :alt="product.name">
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-price">¥{{ product.price }}</p>
              <p class="product-desc">{{ product.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const currentCategory = ref(0)
const searchKeyword = ref('')

// 模拟分类数据
const categories = ref([
  { id: 1, name: '工业机器人' },
  { id: 2, name: '家用机器人' },
  { id: 3, name: '公共机器人' },
  { id: 4, name: '特种机器人' },
  { id: 5, name: '产业链' }
])

// 模拟商品数据
const products = ref([
  {
    id: 1,
    categoryId: 1,
    name: 'Unitree Go2',
    price: 9997,
    description: '机器狗 Go2',
    image: '/src/assets/img/phone/dogGo2.png'
  },
  {
    id: 2,
    categoryId: 1,
    name: 'Unitree B2',
    price: 19999,
    description: '机器狗 B2',
    image: '/src/assets/img/phone/dogB2.png'
  },
  {
    id: 3,
    categoryId: 1,
    name: 'Unitree B2',
    price: 19999,
    description: '机器狗 B2',
    image: '/src/assets/img/phone/dogB2.png'
  },
  {
    id: 1,
    categoryId: 2,
    name: 'Unitree B2',
    price: 19999,
    description: '机器狗 B2',
    image: '/src/assets/img/phone/dogB2.png'
  },
  {
    id: 2,
    categoryId: 2,
    name: 'Unitree Go2',
    price: 9997,
    description: '机器狗 Go2',
    image: '/src/assets/img/phone/dogGo2.png'
  },
  {
    id: 1,
    categoryId: 3,
    name: 'Unitree B2',
    price: 19999,
    description: '机器狗 B2',
    image: '/src/assets/img/phone/dogB2.png'
  },
  {
    id: 2,
    categoryId: 3,
    name: 'Unitree Go2',
    price: 9997,
    description: '机器狗 Go2',
    image: '/src/assets/img/phone/dogGo2.png'
  },
  {
    id: 1,
    categoryId: 4,
    name: 'Unitree B2',
    price: 19999,
    description: '机器狗 B2',
    image: '/src/assets/img/phone/dogB2.png'
  },
  {
    id: 2,
    categoryId: 4,
    name: 'Unitree Go2',
    price: 9997,
    description: '机器狗 Go2',
    image: '/src/assets/img/phone/dogGo2.png'
  },
  // 更多商品数据...
])

// 计算当前分类下的商品
const currentProducts = computed(() => {
  return products.value.filter(
      product => product.categoryId === categories.value[currentCategory.value].id
  )
})

// 选择分类
const selectCategory = (index) => {
  currentCategory.value = index
}

// 搜索商品
const searchProducts = () => {
  // 这里可以实现搜索逻辑
  console.log('搜索关键词：', searchKeyword.value)
}

// 跳转到商品详情
const goToDetail = (productId) => {
  router.push(`/product/${productId}`)
}
</script>

<style scoped>
.category-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.search-bar {
  padding: 5px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  gap: 10px;
}

.search-bar input {
  flex: 1;
  padding: 8px 15px;
  border: 1px solid #dddddd;
  border-radius: 15px;
  font-size: 12px;
}

.search-bar button {
  padding: 8px 20px;
  background: #0a0a0a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.main-content {
  display: flex;
  flex: 1;
}

.category-nav {
  width: 100px;
  background: #f5f5f5;
  padding: 15px 0;
}

.category-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-nav li {
  padding: 10px 15px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.category-nav li:hover {
  background: #e8e8e8;
}

.category-nav li.active {
  background: #fff;
  color: #e4393c;
  font-weight: bold;
}

.product-list {
  flex: 1;
  padding: 15px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.product-item {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.product-img {
  height: 160px;
  overflow: hidden;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  padding: 10px;
}

.product-name {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
}

.product-price {
  color: #e4393c;
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 8px;
}

.product-desc {
  color: #666;
  font-size: 12px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

